﻿<!DOCTYPE html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
    <title>乐优商城--商品搜索结果页</title>
    <link rel="icon" href="assets/img/favicon.ico">
    <link href='./css/material.css' rel="stylesheet">
    <link href="./css/vuetify.min.css" rel="stylesheet">
    <script src="./js/vue/vue.js"></script>
    <script src="./js/vue/vuetify.js"></script>
    <script src="./js/axios.min.js"></script>
    <script src="./js/common.js"></script>
    <link rel="stylesheet" type="text/css" href="css/webbase.css"/>
    <link rel="stylesheet" type="text/css" href="css/pages-list.css"/>
    <link rel="stylesheet" type="text/css" href="css/widget-cartPanelView.css"/>
    <style type="text/css">
        * {
            box-sizing: unset;
        }
        .btn-arrow, .btn-arrow:visited, .btn-arrow:link, .btn-arrow:active {
            width: 46px;
            height: 23px;
            border: 1px solid #DDD;
            background: #FFF;
            line-height: 23px;
            font-family: "\5b8b\4f53";
            text-align: center;
            font-size: 16px;
            color: #AAA;
            text-decoration: none;
            out-line: none
        }

        .btn-arrow:hover {
            background-color: #1299ec;
            color: whitesmoke;
        }

        .top-pagination {
            display: block;
            padding: 3px 15px;
            font-size: 11px;
            font-weight: 700;
            line-height: 18px;
            color: #999;
            text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
            text-transform: uppercase;
            float: right;
            margin-top: 6px
        }

        .top-pagination span {
            margin-right: 10px;
        }
        .logo-list li{
            padding:8px;
        }
        .logo-list li:hover{
            background-color: #f3f3f3;
        }
        .type-list a:hover{
            color: #1299ec;
        }
        .skus {
            list-style: none;
        }
        .skus li{
            list-style: none;
            display: inline-block;
            float: left;
            margin-left: 2px;
            border: 2px solid #f3f3f3;
        }
        .skus li.selected{
            border: 2px solid #dd1144;
        }
        .skus img{
            width: 25px;
            height: 25px;
        }
    </style>
    <script type="text/javascript" src="plugins/jquery/jquery.min.js"></script>
</head>

<body >

<div id="searchApp">
    <div id="nav-bottom">
        <ly-top/>
    </div>


    <!--list-content-->
    <div class="main" >
        <div class="py-container">

            <div class="bread">
                <!--面包屑-->
                <ul class="fl sui-breadcrumb">
                    <li><span>全部结果:</span></li>
                    <li v-for="(category,index) in breads" :key="index" >
                        <a href="#" v-if="index < 2">{{category.name}}</a>
                        <span v-else>{{category.name}}</span>
                    </li>

                </ul>
                <!--已选择过滤项-->
                <ul class="tags-choose">
                    <li class="tag" v-for="(v,k) in search.filter" v-if="k!=='分类'" :key="k">
                        {{k==="brandId"?'品牌':k}}:<span style="color: red" >{{getFilterValue(v,k)}}</span>
                        <i class="sui-icon icon-tb-close" @click="search.filter[k]=null"></i>
                    </li>
                    <!--    <li class="tag">
                            内存:<span style="color: red">4G</span>
                            <i class="sui-icon icon-tb-close"></i>
                        </li>-->
                </ul>
                <div class="clearfix"></div>
            </div>
            <!--selector-->
            <div class="clearfix selector" >


            <div class="type-wrap" v-for="(filter,index) in remainFilters"  :key="index"  v-if="filter.k!='品牌'" v-show="index < 5 || specShow">
                <div class="fl key">{{filter.k}}</div>
                <div class="fl value">
                    <ul class="type-list">
                        <li :key="j" @click="selectFilter(filter.k,option)" v-for="(option,j) in filter.options">
                            <a>{{option.name}}</a>
                        </li>
                        <!--<li>
                            <a>儿童手表</a>
                        </li>-->
                    </ul>
                </div>
                <div class="fl ext"></div>
            </div>
            <div class="type-wrap logo" v-else>
                <div class="fl key brand">{{filter.k}} {{search.total}} </div>
                <div class="value logos">
                    <!-- <ul class="logo-list" v-for="(option,j) in filter.options" :key="j">
                         <li v-if="option.image"  @click="selectFilter(filter.k,option)" ><img :src="option.image" /></li>
                         <li v-else  style="text-align: center"  @click="selectFilter(filter.k,option)" ><a style="line-height: 30px; font-size: 12px" href="#">{{option.name}}</a></li>
                     </ul>-->
                    <ul class="logo-list" >
                        <li v-for="(option,j) in filter.options"  v-if="option.image"  @click="selectFilter(filter.k,option)" ><img :src="option.image" /></li>
                        <li v-else  style="text-align: center"  @click="selectFilter(filter.k,option)" ><a style="line-height: 30px; font-size: 12px" href="#">{{option.name}}</a></li>
                    </ul>
                </div>
                <div class="fl ext">
                    <a href="javascript:void(0);" class="sui-btn">多选</a>
                </div>
            </div>
            <!--<div class="type-wrap">
                <div class="fl key">网络制式</div>
                <div class="fl value">
                    <ul class="type-list">
                        <li>
                            <a>GSM（移动/联通2G）</a>
                        </li>
                        <li>
                            <a>电信2G</a>
                        </li>
                        <li>
                            <a>电信3G</a>
                        </li>
                        <li>
                            <a>移动3G</a>
                        </li>
                        <li>
                            <a>联通3G</a>
                        </li>
                        <li>
                            <a>联通4G</a>
                        </li>
                        <li>
                            <a>电信3G</a>
                        </li>
                        <li>
                            <a>移动3G</a>
                        </li>
                        <li>
                            <a>联通3G</a>
                        </li>
                        <li>
                            <a>联通4G</a>
                        </li>
                    </ul>
                </div>
                <div class="fl ext"></div>
            </div>
            <div class="type-wrap">
                <div class="fl key">显示屏尺寸</div>
                <div class="fl value">
                    <ul class="type-list">
                        <li>
                            <a>4.0-4.9英寸</a>
                        </li>
                        <li>
                            <a>4.0-4.9英寸</a>
                        </li>
                    </ul>
                </div>
                <div class="fl ext"></div>
            </div>
            <div class="type-wrap">
                <div class="fl key">摄像头像素</div>
                <div class="fl value">
                    <ul class="type-list">
                        <li>
                            <a>1200万以上</a>
                        </li>
                        <li>
                            <a>800-1199万</a>
                        </li>
                        <li>
                            <a>1200-1599万</a>
                        </li>
                        <li>
                            <a>1600万以上</a>
                        </li>
                        <li>
                            <a>无摄像头</a>
                        </li>
                    </ul>
                </div>
                <div class="fl ext"></div>
            </div>
            <div class="type-wrap">
                <div class="fl key">价格</div>
                <div class="fl value">
                    <ul class="type-list">
                        <li>
                            <a>0-500元</a>
                        </li>
                        <li>
                            <a>500-1000元</a>
                        </li>
                        <li>
                            <a>1000-1500元</a>
                        </li>
                        <li>
                            <a>1500-2000元</a>
                        </li>
                        <li>
                            <a>2000-3000元 </a>
                        </li>
                        <li>
                            <a>3000元以上</a>
                        </li>
                    </ul>
                </div>
                <div class="fl ext">
                </div>
            </div>-->
            <div class="type-wrap" style="text-align: center">
                <v-btn small flat @click="specShow=true" v-show="!specShow">
                    更多<v-icon>arrow_drop_down</v-icon>
                </v-btn>
                <v-btn small="" flat @click="specShow=false" v-show="specShow">
                    收起<v-icon>arrow_drop_up</v-icon>
                </v-btn>
            </div>

        </div>
            <!--details-->
            <div class="details">
                <div class="sui-navbar">
                    <div class="navbar-inner filter">
                        <ul class="sui-nav">
                            <li :class="{active:!search.sortBy}" @click="search.sortBy=''" >
                                <a href="#">综合</a>
                            </li>
                            <li>
                                <a href="#">销量</a>
                            </li>
                            <li :class="{active:search.sortBy=='createTime'}" @click="search.sortBy='createTime'">
                                <a href="#">新品</a>
                            </li>
                            <li>
                                <a href="#">评价</a>
                            </li>
                            <li :class="{active:search.sortBy=='price'}" @click="search.sortBy='price',search.descending=!search.descending">
                                <a href="#">价格
                                    <v-icon v-show="search.descending">arrow_drop_down</v-icon>
                                    <v-icon v-show="!search.descending">arrow_drop_up</v-icon>
                                </a>
                            </li>
                        </ul>
                        <div class="top-pagination">
                            <span>共 <i style="color: #222;">{{total}}+</i> 商品</span>
                            <span><i style="color: red;">{{search.page}}</i>/{{totalPage}}</span>
                            <a class="btn-arrow" href="#" style="display: inline-block" @click="prev">&lt;</a>
                            <a class="btn-arrow" href="#" style="display: inline-block" @click="next">&gt;</a>
                        </div>
                    </div>
                </div>
                <div class="goods-list">
                    <ul class="yui3-g">
                        <li class="yui3-u-1-5" v-for="(goods,index) in goodsList" :key="index">
                            <div class="list-wrap">
                                <div class="p-img">
                                    <a :href="'item/'+goods.id+'.html'" target="_blank"><img :src="goods.selected.images" height="200"/></a>
                                    <ul class="skus" v-for="(sku,j) in goods.skus">
                                        <li :class="{selected:goods.selected.id==sku.id}"><img :src="sku.images" @mouseOver="goods.selected=sku"></li>

                                        <!--<li class=""><img src="img/_/mobile01.png"></li>
                                        <li class=""><img src="img/_/mobile01.png"></li>-->
                                    </ul>
                                </div>
                                <div class="clearfix"></div>
                                <div class="price">
                                    <strong>
                                        <em>¥</em>
                                        <i>{{ly.formatPrice(goods.selected.price)}}</i>
                                        <!--<i>6088.00</i>-->
                                    </strong>
                                </div>
                                <div class="attr">
                                    <em>{{goods.selected.title.length > 17 ? goods.selected.title.substr(0,17):goods.selected.title}}</em>
                                    <!--<em>Apple苹果iPhone 6s (A1699)</em>-->
                                </div>
                                <div class="cu">
                                    <em><span>促</span>{{goods.subTitle.length >15 ? goods.subTitle.substring(0,15)+"...":goods.subTitle}}</em>
                                </div>
                                <div class="commit">
                                    <i class="command">已有2000人评价</i>
                                </div>
                                <div class="operate">
                                    <a href="success-cart.html" target="_blank" class="sui-btn btn-bordered btn-danger">加入购物车</a>
                                    <a href="javascript:void(0);" class="sui-btn btn-bordered">对比</a>
                                    <a href="javascript:void(0);" class="sui-btn btn-bordered">关注</a>
                                </div>
                            </div>
                        </li>

                    </ul>
                </div>
                <div class="fr">
                    <div class="sui-pagination pagination-large ">
                        <ul style="width: 520px">
                            <li class="prev " :class="{disabled:search.page==1}" @click="prev">
                                <a href="#">«上一页</a>
                            </li>
                            <li  :class="{disabled:search.page==1}" @click="prev">
                            <li class="dotted" v-if="search.page > 3"><span>...</span></li>
                            <li :class="{active:search.page==indexPage(i)}" v-for="i in  Math.min(5,totalPage)" @click="search.page= indexPage(i)" >
                                <a href="#">{{indexPage(i)}}</a>
                            </li>
                            <li class="dotted" v-if="search.page<totalPage-2"><span>...</span></li>
                            <li class="next" :class="{disabled : search.page==totalPage}" @click="next()">
                                <a href="#" >下一页»</a>
                            </li>
                        </ul>
                        <div><span>共10页&nbsp;</span><span>
      到第
      <input type="text" class="page-num" v-model="jumpPage">
      页 <button class="page-confirm" @click="isNaN(indexPage(jumpPage))?jumpPage=search.page:search.page=jumpPage">确定</button></span></div>
                    </div>
                </div>
            </div>
            <!--hotsale-->
            <div class="clearfix hot-sale">
                <h4 class="title">热卖商品</h4>
                <div class="hot-list">
                    <ul class="yui3-g">
                        <li class="yui3-u-1-4">
                            <div class="list-wrap">
                                <div class="p-img">
                                    <img src="img/like_01.png"/>
                                </div>
                                <div class="attr">
                                    <em>Apple苹果iPhone 6s (A1699)</em>
                                </div>
                                <div class="price">
                                    <strong>
                                        <em>¥</em>
                                        <i>4088.00</i>
                                    </strong>
                                </div>
                                <div class="commit">
                                    <i class="command">已有700人评价</i>
                                </div>
                            </div>
                        </li>
                        <li class="yui3-u-1-4">
                            <div class="list-wrap">
                                <div class="p-img">
                                    <img src="img/like_03.png"/>
                                </div>
                                <div class="attr">
                                    <em>金属A面，360°翻转，APP下单省300！</em>
                                </div>
                                <div class="price">
                                    <strong>
                                        <em>¥</em>
                                        <i>4088.00</i>
                                    </strong>
                                </div>
                                <div class="commit">
                                    <i class="command">已有700人评价</i>
                                </div>
                            </div>
                        </li>
                        <li class="yui3-u-1-4">
                            <div class="list-wrap">
                                <div class="p-img">
                                    <img src="img/like_04.png"/>
                                </div>
                                <div class="attr">
                                    <em>256SSD商务大咖，完爆职场，APP下单立减200</em>
                                </div>
                                <div class="price">
                                    <strong>
                                        <em>¥</em>
                                        <i>4068.00</i>
                                    </strong>
                                </div>
                                <div class="commit">
                                    <i class="command">已有20人评价</i>
                                </div>
                            </div>
                        </li>
                        <li class="yui3-u-1-4">
                            <div class="list-wrap">
                                <div class="p-img">
                                    <img src="img/like_02.png"/>
                                </div>
                                <div class="attr">
                                    <em>Apple苹果iPhone 6s (A1699)</em>
                                </div>
                                <div class="price">
                                    <strong>
                                        <em>¥</em>
                                        <i>4088.00</i>
                                    </strong>
                                </div>
                                <div class="commit">
                                    <i class="command">已有700人评价</i>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

</div>

<script type="text/javascript">
    var vm = new Vue({
        el: "#searchApp",
        data: {
            ly,
            search:{
                key:"",//用于模糊搜索
                page:1,//当前页
                sortBy:"",//排序字段
                descending:false,//是否降序
                filter:[],//过滤的规格参数集合
            },
            goodsList:[],//商品集合
            totalPage:0,//总页数
            total:0,//总条数
            filters:[],//过滤参数集合
            specShow:false,//显示规格参数的行数
            jumpPage:1,//自定义跳转的页数
            breads:[],//面包屑
        },
        created(){

            if(!location.search){
                return ;
            }
            //将参数转为json对象
            const search=ly.parse(location.search.substring(1));
            //对page进行初始化，防止第一次访问的时候为null
            search.page = search.page ? parseInt(search.page) : 1;
            //对排序字段进行初始化，默认为不排序
            search.sortBy = search.sortBy || "";
            //对排序方式进行初始化，转化为布尔值
            search.descending = search.descending === "true" || false;
            search.filter = search.filter || {};//初始化filter过滤规格参数对象
            this.jumpPage=search.page || 1;
            this.search=search;
            //异步请求数据
            this.loadData();
        },
        methods:{
            /*加载数据*/
            loadData: function () {

                ly.http.post("/search/page", this.search).then(resp => {
                    resp.data.items.forEach(goods => {
                        goods.skus = JSON.parse(goods.skus);//将json字符串转为json对象
                        let index = 0;//定义选中的下标
                        if(this.search.sortBy==="price"){//判断是否是价格排序
                            //为index赋值升序降序得到的最小值或最大值的下标位置
                            goods.price.reduce((a, b, i) => (this.search.descending? a < b : a>b ) ? (index = i,b) : a);
                        }
                        goods.selected = goods.skus[index];//默认选中第一个，如果价格排序就选中最大或者最小的索引位置

                    });
                    this.goodsList = resp.data.items;
                    this.totalPage = resp.data.totalPage;
                    this.total = resp.data.total;
                    this.filters.push({
                        k : "分类",
                        options:resp.data.categories,
                    });
                    this.filters.push({
                        k : "品牌",
                        options: resp.data.brands,
                    });


                    resp.data.specs.forEach(spec=>{

                        spec.options=spec.options.map(o=>({name:o}));
                        this.filters.push(spec);
                    });
                    //初始化商品分类过滤的一个参数
                    //如果只有一个，则查询三级商品分类，并展示面包屑
                    if(resp.data.categories.length===1){
                        ly.http.get("search/breads?id="+resp.data.categories[0].id).then(({data})=>{
                            this.breads=data;
                        });
                    }
                });
            },
            /*计算分页的页数*/
            indexPage(i){
                if(i<=0||i>this.totalPage){
                    alert("请正确输入页码->["+1+"-"+this.totalPage+"]");
                    return ;
                }
                if(this.search.page <= 3 ||this.totalPage <= 5){
                    return i;//前5页
                }else if(this.search.page >= this.totalPage -2){
                    return this.totalPage - 5 +i;//最后5页
                    // return i;
                }else{
                    // return i
                    return this.search.page - 3 +i;//中间页
                }
            },


            testIndexPage(i){
                if(i<=0||i>this.totalPage){
                    alert("请正确输入页码->["+1+"-"+this.totalPage+"]");
                    return ;
                }
                if(this.search.page <= 3 ||this.totalPage <= 5){
                    return i;//前5页
                }else if(this.search.page >= this.totalPage -2){
                    return this.totalPage - 5 +i;//最后5页
                    // return i;
                }else{
                    // return i
                    return this.search.page - 3 +i;//中间页
                }
            },


            /*上一页*/
            prev(){
                if(this.search.page>1){
                    this.search.page--;
                }
            },
            /*下一页*/
            next(){
                if(this.search.page<this.totalPage){
                    this.search.page++;
                }
            },
            /*要过滤规格参数信息*/
            selectFilter(k,option){
                let obj = {};
                Object.assign(obj,this.search);
                /* if(k=='分类' || k == '品牌'){
                     obj.filter[k]=option.id;
                 }else{
                     obj.filter[k]=option.name;
                 }*/
                if(k === '分类' || k === '品牌'){
                    option.name=option.id;
                }
                obj.filter[k]=option.name;
                this.search=obj;
            },
            /*获取过滤的参数值*/
            getFilterValue(v,k){
                //如果没有过滤参数，我们跳过展示
                if(!this.filters || this.filters.length==0){
                    return;
                }
                //判断是否是品牌
                if(k==="品牌"){
                    //返回品牌名称
                    return this.filters.find(f=>f.k===k).options[0].name;
                }
                return v;

            }


        },
        computed:{

            /*重新计算过滤参数信息*/
            remainFilters(){
                let keys = Object.keys(this.search.filter);
                /*供用户选择的规格参数中不在包含已经选中的规格参数，并且只有一个参数值的也不用展示*/
                return this.filters.filter(f=>!keys.includes(f.k) && f.options.length>1);
            }
        },

        watch:{
            //监听search的变化
            search:{
                deep:true,//深度监控
                handler(newVal,oldVal){
                    //如果老数据不为空或者老数据中的key不为空说明已经执行查询了，直接结束，不用再次发送请求
                    if(!oldVal || !oldVal.key){
                        return;
                    }
                    //改变地址栏上的参数信息
                    window.location.href="http://www.leyou.com/search.html?"+ly.stringify(newVal);
                }
            }
        },


        components:{
            lyTop: () => import("./js/pages/top.js")
        }
    });
</script>
<!-- 底部栏位 -->
<!--页面底部，由js动态加载-->
<div class="clearfix footer"></div>
<script type="text/javascript">$(".footer").load("foot.html");</script>
<!--页面底部END-->

</body >
<!--购物车单元格 模板-->
<script type="text/template" id="tbar-cart-item-template">
    <div class="tbar-cart-item">
        <div class="jtc-item-promo">
            <em class="promo-tag promo-mz">满赠<i class="arrow"></i></em>
            <div class="promo-text">已购满600元，您可领赠品</div>
        </div>
        <div class="jtc-item-goods">
            <span class="p-img"><a href="#" target="_blank"><img src="{2}" alt="{1}" height="50" width="50"/></a></span>
            <div class="p-name">
                <a href="#">{1}</a>
            </div>
            <div class="p-price"><strong>¥{3}</strong>×{4}</div>
            <a href="#none" class="p-del J-del">删除</a>
        </div>
    </div>
</script>
<!--侧栏面板结束-->
<script type="text/javascript" src="js/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("#service").hover(function () {
            $(".service").show();
        }, function () {
            $(".service").hide();
        });
        $("#shopcar").hover(function () {
            $("#shopcarlist").show();
        }, function () {
            $("#shopcarlist").hide();
        });

    })
</script>
<script type="text/javascript" src="js/model/cartModel.js"></script>
<script type="text/javascript" src="js/czFunction.js"></script>
<script type="text/javascript" src="js/plugins/jquery.easing/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/plugins/sui/sui.min.js"></script>
<script type="text/javascript" src="js/widget/cartPanelView.js"></script>


</html>









